<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="加盟合作" titleTintColor="#fff"><text slot="back" class="iconfont">&#xe63d;</text></navigation>
		<view class="page-contain">
			<view class="p-c-header">
				<view class="p-c-h-item" @click="selectTab(0)" :class="{ active: selctStatus == 0 }">加盟优势</view>
				<view class="p-c-h-item" @click="selectTab(1)" :class="{ active: selctStatus == 1 }">代理协议</view>
				<view class="p-c-h-item" @click="selectTab(2)" :class="{ active: selctStatus == 2 }">代理申请</view>
			</view>
			<view class="p-c-contain padding" v-show="selctStatus == 0"><parser :tag-style="tagStyle" img-mode="widthFix" :html="joinData.stranger.cfg_val"></parser></view>
			<view class="p-c-contain padding" v-show="selctStatus == 1"><parser :tag-style="tagStyle" img-mode="widthFix" :html="joinData.agreement.cfg_val"></parser></view>
			<view class="p-c-contain join-link" v-show="selctStatus == 2">
				<view class="join-link-link">
					<view class="join-link-link-item">
						<view><text class="iconfont" style="font-size: 100rpx;color: #1a94d1;">&#xe689;</text></view>
						<view style="flex:200">
							<view class="tit">事业部邮箱</view>
							<view class="tit-v"><rich-text :nodes="joinData.mail.cfg_val"></rich-text></view>
						</view>
						<view><text class="zx">立即咨询</text></view>
					</view>
					<view class="join-link-link-item">
						<view><text class="iconfont" style="font-size: 100rpx;color: #09bc64;">&#xe60a;</text></view>
						<view style="flex:200">
							<view class="tit">事业部微信</view>
							<view class="tit-v"><rich-text :nodes="joinData.wechant.cfg_val"></rich-text></view>
						</view>
						<view><text class="zx">立即咨询</text></view>
					</view>
					<view class="join-link-link-item">
						<view><text class="iconfont" style="font-size: 100rpx;color: #1c94d1;">&#xe686;</text></view>
						<view style="flex:200">
							<view class="tit">事业部Skeye</view>
							<view class="tit-v"><rich-text :nodes="joinData.skype.cfg_val"></rich-text></view>
						</view>
						<view><text class="zx">立即咨询</text></view>
					</view>
					<view class="join-link-link-item">
						<view><text class="iconfont" style="font-size: 100rpx;color: #5ebeff;">&#xe605;</text></view>
						<view style="flex:200">
							<view class="tit">事业部QQ</view>
							<view class="tit-v"><rich-text :nodes="joinData.wechant.cfg_val"></rich-text></view>
						</view>
						<view><text class="zx">立即咨询</text></view>
					</view>
				</view>
				<view class="join-link-time">
					<view class="service-time">
						营业时间:
						<rich-text style="color: #0391ff;" :nodes="joinData.open.cfg_val"></rich-text>
					</view>
					<view>全年无休&nbsp;&nbsp;为您服务</view>
				</view>
			</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
import parser from '@/components/parser/index';
export default {
	components: { Tabbar, navigation, parser },
	data() {
		return {
			selctStatus: 0, //选中顶部的tab
			joinData: { agreement: {}, mail: {}, open: {}, qq: {}, skype: {}, stranger: {}, wechant: {}, qq_no: {} },
			tagStyle: {
				img: '100%'
			}
		};
	},
	onLoad() {
		this.joinNet();
	},
	methods: {
		selectTab(mark) {
			if (this.selctStatus + '' == mark + '') {
				return;
			}
			this.selctStatus = mark + '';
		},
		/**
		 * 获取加盟合作的数据
		 */
		joinNet() {
			let that = this;
			Net.ayiHttp(
				URL.OTHER_CONFIG,
				'{"type":"join"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('处理好了的', data);
						that.joinData = data;
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * @param {Object} value 复制内容值
		 */
		copyText(value) {},
		/**
		 * 打开微信二维码的图片
		 */
		toEwm() {},
		/**
		 * 跳转到qq
		 * @param {Object} value QQ的链接值
		 */
		toQQ(value) {}
	},
	onUnload: {}
};
</script>

<style lang="scss">
.page-contain {
	margin-bottom: 100rpx;
	.p-c-header {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background: #f1f1f1;
		.p-c-h-item {
			flex: 1;
			text-align: center;
			border-bottom: 2px solid #e8e9ec;
			font-size: 28rpx;
			font-weight: bold;
			color: #666;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&.active {
				border-bottom: 2px solid $wlh-color-defealt;
			}
		}
	}
	.join-link-link {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx;
		.join-link-link-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-radius: 20rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
			padding: 40rpx 20rpx;
			margin-bottom: 40rpx;
			.iconfont {
				padding-right: 20rpx;
			}
			.tit {
				font-size: 28rpx;
				color: #6f6f6f;
			}
			.tit-v {
				font-size: 28rpx;
				color: #ff6565;
			}
			.zx {
				background: #ff6565;
				color: #fff;
				padding: 8rpx 20rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
			}
		}
	}
	.join-link-time {
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		margin: 0px 20rpx;
		padding: 40rpx 20rpx;
		text-align: center;
		font-size: 34rpx;
		.service-time {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}
}
.padding {
	padding: 20rpx;
}
</style>
